import { Breadcrumb, Button } from 'antd';
import { useState, useRef, useEffect } from 'react';
import '../../assets/css/menu.css'
// 引入接口封装
import { getMenu } from '../../request/api';
import List from './list'
import Dialog from './dialog'
// /创建函数组件
function App() {
    let [menulist, setlist] = useState([]);
    // 设置一个ref
    let toastInfo = useRef();
    // 生命周期
    useEffect(() => {
        getMenuList()
    })
    // 封装接口列表
    const getMenuList = async () => {
        let res = await getMenu();
        // console.log(res, '响应');
        if (res.code == 200) {
          setlist(res.list);
        }
    };
    // 定义是否显示弹框
    let [isShow, setShow] = useState(false);
    // 定义随添加还是编辑
    let [isAdd, setAdd] = useState(true);
    // 封装一个添加按钮事件
    const add = () => {
        setShow(true)
        setAdd(true)
    }
    //  封装一个取消事件
    const cancel = () => {
        setShow(false)
    }
    // 封装一个列表编辑事件
    const edit = (e) =>{
        setShow(true);
        setAdd(false)
        toastInfo.current.lookup(e);
    }
    return (
        <div>
            <div>
                <Breadcrumb >
                    <Breadcrumb.Item>
                        <a href="#" >首页</a>
                    </Breadcrumb.Item>

                    <Breadcrumb.Item>菜单管理</Breadcrumb.Item>
                </Breadcrumb>
            </div>
            <div>
                <Button type="primary" className='button' onClick={add} >
                    添加
                </Button>
            </div>
            <div>
                <List
                    menulist={menulist}
                    getMenuList={getMenuList} 
                    edit={edit} />
                <Dialog isShow={isShow} isAdd={isAdd} cancel={cancel} menulist={menulist} getMenuList={getMenuList} ref={toastInfo} />
            </div>
        </div>
    );

}
export default App
